<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom2" style="height: 150px;margin-top: 10px;"></div>
    </div>
</template>
<script>
import { get } from '@/utils/request';
import { DualAxes } from '@antv/g2plot';
import moment from 'moment';
import { mapState } from 'vuex';

export default {
    data() {
        return {
            title: '风速风向曲线',
            params: {
                page: 1,
                pageSize: 100
            },
            windData: [],
            dualAxes: null
        }
    },

    computed: {
        ...mapState(['ed'])
    },

    watch: {
        ed: {
            handler() {
                this.getWindData();
                if (this.dualAxes) {
                    this.dualAxes.changeData([this.windData, this.windData]);
                }
            },
            deep: true
        }
    },

    methods: {
        loadDualAxes() {
            this.dualAxes = new DualAxes(this.$refs.bottom2, {
                data: [this.windData, this.windData],
                xField: 'insert_time',
                yField: ['wind_speed', 'wind_direction'],
                geometryOptions: [
                    {
                        geometry: 'line',
                        color: '#5B8FF9',
                    },
                    {
                        geometry: 'line',
                        color: '#5AD8A6',
                    },
                ],
                xAxis: {
                    label: {
                        autoHide: true
                    }
                },
                yAxis: [
                    {
                        title: {
                            visible: true,
                            text: '风速 (m/s)'
                        }
                    },
                    {
                        title: {
                            visible: true,
                            text: '风向 (°)'
                        }
                    }
                ]
            });
            this.dualAxes.render();
        },

        async getWindData() {
            try {
                let res = await get('/dashboard/pageQueryTodayData', this.params);
                let wind = [];
                if (res.data && res.data.list && Array.isArray(res.data.list)) {
                    res.data.list.forEach((item, index) => {
                        item.insert_time = moment(item.insert_time).format("HH:mm");
                        if (index % 10 == 0) {
                            // 假设接口返回wind_speed（风速）和wind_direction（风向角度）字段
                            wind.push({
                                insert_time: item.insert_time,
                                wind_speed: Number(item.wind_speed) || 0,
                                wind_direction: Number(item.wind_direction) || 0
                            });
                        }
                    });
                }
                this.windData = wind;
            } catch (error) {
                console.error('获取风速风向数据失败：', error);
                // 模拟数据兜底，确保图表有内容
                this.windData = [
                    { insert_time: '10:00', wind_speed: 2, wind_direction: 90 },
                    { insert_time: '10:10', wind_speed: 3, wind_direction: 180 },
                    { insert_time: '10:20', wind_speed: 2.5, wind_direction: 270 },
                    { insert_time: '10:30', wind_speed: 4, wind_direction: 360 }
                ];
            }
        }
    },

    async mounted() {
        await this.getWindData();
        this.loadDualAxes();
    }
}
</script>
<style lang="less" scoped></style>